<template>
  <div class="modify-teacher">
    <header class="modify-header">
      <div class="left">
        <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
        <span>|</span>
        <span>批改作业</span>
      </div>
      <div class="right">
        课程管理系统
      </div>
    </header>
    <main class="modify-main">
      <!-- 使用iframe -->
      <!-- <iframe v-if="this.submittedAssignments.submissioUrl" :src="this.submittedAssignments.submissioUrl"
        :key="this.submittedAssignments.submissioUrl" width="70%" height="800px"></iframe> -->
      <!-- <div v-html="htmlContent"></div> -->
      <!-- <div v-if="isDocxFile" v-html="htmlContent"></div>
      <iframe v-else :src="this.submittedAssignments.submissioUrl" :key="this.submittedAssignments.submissioUrl"
        width="70%" height="800px"></iframe> -->
      <!-- 如果文件是PDF -->
      <div v-if="isDocxFile" v-html="htmlContent"></div>
      <div>{{ this.isDocxFile }}</div>
      <iframe v-if="isDocxFile" :src="submittedAssignments.submissioUrl" :key="submittedAssignments.submissioUrl"
        width="70%" height="800px"></iframe>
      <!-- 如果文件是DOCX，并且已经转换成了HTML -->
      <!-- <div v-else v-html="htmlContent"></div> -->
      <div class="button-container" style="margin-right: 10%;">
        <span style="margin-right: 5%; margin-bottom: 5%;">作业分数</span>
        <el-input-number class="item" v-model="editGrade" :min="0" :max="100" label="小组分" required></el-input-number>
        <el-button type="primary" @click="confirm()" style="margin-left: 20%; margin-right: 20%; margin-top: 10%;">确
          定</el-button>
      </div>
    </main>
  </div>
</template>

<script>
import { getSubmittedAssignmentsAPI, editSubmittedAssignmentsAPI } from "@/api/submittedAssignments";
import mammoth from 'mammoth';
import { getFile } from '@/utils/FileService';
export default {
  data() {
    return {
      submittedAssignmentsId: '',
      submittedAssignments: null || '',
      editGrade: '',
      isDocxFile: true,
      htmlContent: ''
    }
  },
  computed: {
    // 计算属性来判断是否是 .docx 文件
    // isDocxFile() {
    //   // 获取当前URL的路径
    //   console.log(this.submittedAssignments.submissionUrl);
      
    //   const currentUrl = this.submittedAssignments.submissionUrl;

    //   // 使用split方法分割路径，获取文件名部分
    //   const fileName = currentUrl.split('/').pop();

    //   // 使用endsWith方法检查文件名是否以.pdf结尾
    //   const isPdf = fileName.endsWith('.pdf');

    //   // 打印结果
    //   console.log(isPdf); // 输出: true 或 false
    //   // this.submittedAssignments.submissionUrl
    //   // if (this.submittedAssignments.submissionUrl.endsWith('.docx')) {
    //   //   this.isDocxFile = true
    //   // }
    //   // return this.submittedAssignments.submissionUrl &&
    //   //   this.submittedAssignments.submissionUrl.endsWith('.docx');
    // }
  },

  mounted() {
    this.submittedAssignments = this.$route.query.submittedAssignments
    this.submittedAssignmentsId = this.$route.query.submittedAssignmentsId
    this.editGrade = this.submittedAssignments.grade
    this.getSubmittedAssignments()
    this.isDocxFile()
  },

  methods: {
    isDocxFile() {
      // 获取当前URL的路径
      console.log('aaa');
      
      console.log(this.submittedAssignments.submissionUrl);
      
      const currentUrl = this.submittedAssignments.submissionUrl;

      // 使用split方法分割路径，获取文件名部分
      const fileName = currentUrl.split('/').pop();

      // 使用endsWith方法检查文件名是否以.pdf结尾
      const isPdf = fileName.endsWith('.pdf');

      // 打印结果
      console.log(isPdf); // 输出: true 或 false
    },

    // 获取该提交作业
    async getSubmittedAssignments() {
      if (this.submittedAssignmentsId !== '') {
        try {
          const res = await getSubmittedAssignmentsAPI(this.submittedAssignmentsId)
          // 处理资源的代码
          this.submittedAssignments = res.data;
          // 处理资源的代码
        } catch (error) {
          // 处理异常的代码
          console.error('Error fetching submitted assignment:', error);
        }
      }
    },
    async previewFile() {
      console.log('ispre');
      if (this.isDocxFile) {
        const fileUrl = this.submittedAssignments.submissioUrl;
        try {
          const arrayBuffer = await getFile(fileUrl);
          const result = await mammoth.convertToHtml({ arrayBuffer });
          this.htmlContent = result.value;
        } catch (error) {
          console.error('Error converting file:', error);
        }
      }
    },
    // 确定按钮
    confirm() {
      // edsubmittedAssignmentsId
      const bodyData = {
        grade: this.editGrade
      }
      editSubmittedAssignmentsAPI(this.submittedAssignmentsId, bodyData).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      }).catch((error) => {
        console.log(error);
      })

    }

  },

}
</script>

<style scoped lang="scss">
.modify-teacher {
  background-color: #f4f6f8;
  height: 100vh;

  .modify-header {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    font-weight: bold;
    background-color: #fff;

    .left {
      span {
        margin-right: 4px;
      }

      .arrow {
        cursor: pointer;
      }
    }

    .right {
      text-align: right;
    }
  }

  .modify-main {
    background: #f4f6f8;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    /* 这将确保子组件分布在容器的两端 */
    align-items: center;

    /* 这将确保子组件在交叉轴上居中对齐 */
    .button-container {
      display: flex;
      flex-direction: column;
      align-self: center;
      /* 设置为列方向，实现垂直排列 */
    }

    // .tableLab {
    //   margin-left: 0;
    // }

    // .form-container {
    //   background-color: #fff;
    //   padding-left: 300px;
    //   padding-right: 300px;
    //   padding-bottom: 100px;

    //   .title {
    //     height: 60px;
    //     line-height: 60px;
    //     padding-left: 20px;
    //   }

    //   .form {
    //     margin-bottom: 20px;
    //     padding: 20px 65px 24px;

    //     .el-form {
    //       display: flex;
    //       flex-wrap: wrap;

    //       .el-form-item {
    //         width: 50%;
    //       }
    //     }
    //   }
    // }
  }

  // .modify-footer {
  //   position: fixed;
  //   bottom: 10px;
  //   width: 100%;
  //   padding: 30px 50px;
  //   color: #000000d9;
  //   font-size: 18px;
  //   background: #fff;
  //   text-align: center;
  // }

}
</style>